<!--
	This file is part of ELCube.
	ELCube is free software: you can redistribute it and/or modify
	it under the terms of the GNU Affero General Public License as published by
	the Free Software Foundation, either version 3 of the License, or
	(at your option) any later version.
	ELCube is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
	GNU Affero General Public License for more details.
	You should have received a copy of the GNU Affero General Public License
	along with ELCube.  If not, see <https://www.gnu.org/licenses/>.
-->
<template>
    <div style="width: 90%;">
        <div  v-if="!editMode" class="uploads">
            <template v-if="fileList && fileList.length && inputOptions.listType==='picture-card'">
                <div v-for="item in fileList" :key="'key1' + item.uid" class="avatar-border" @click="handlePreview(item)">
                    <a-avatar :src="item.url" shape="square" :size="48"></a-avatar>
                </div>
            </template>
            <template v-else-if="fileList && fileList.length">
                <a v-for="item in fileList" :key="'key2' + item.uid" @click="handlePreview(item)" class="link">{{item.name}}</a>
            </template>
            <template v-else-if="designMode && inputOptions.listType==='picture-card'">
                <div class="avatar-border"><a-avatar shape="square" :size="84"></a-avatar></div>
                <div class="avatar-border"><a-avatar shape="square" :size="84"></a-avatar></div>
                <div class="avatar-border"><a-avatar shape="square" :size="84"></a-avatar></div>
            </template>
            <template v-else-if="designMode">
                <a class="link">文件1</a>
                <a class="link">文件2</a>
                <a class="link">文件3</a>
            </template>
            <span v-else class="empty"></span>
        </div>
        <div v-else>
            <a-upload v-if="show && editMode && fileList"
                      :accept    ="inputOptions.accept"
                      class     ="uploader"
                      :file-list="fileList"
                      :list-type="inputOptions.listType"
                      :action   ="config.host"
                      :headers  ="config.header"
                      :data     ="config.data"
                      :showUploadList="true"
                      :multiple ="true"
                      :before-upload="beforeUpload"
                      @change="handleChange"
                      @preview="handlePreview"
            >
                <div v-if="inputOptions.listType==='picture-card'">
                    <a-icon :type="progressStatus==='active' ? 'loading' : 'plus'"></a-icon>
                    <div class="ant-upload-text">
                        上传
                    </div>
                </div>
                <div v-else style="margin-left: 10px;">
                    <a>上传</a>
                </div>
            </a-upload>
        </div>
        <a-progress v-if="editMode && progressPercent!==undefined" :percent="progressPercent" :status="progressStatus" size="small" />
        <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false">
            <img alt="example" style="width: 100%" :src="previewImage" />
        </a-modal>
        <a v-show="false" ref="link"></a>
    </div>
</template>

<script>

    function getBase64(file) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => resolve(reader.result);
            reader.onerror = error => reject(error);
        });
    }

    export default {
        props:{
            value: [],
            editMode: {
                type: Boolean,
                default:false
            },
            inputOptions: {
                type:Object,
                default(){
                    return {}
                }
            },
            designMode: Boolean
        },
        data(){
            return {
                config: {},
                progressPercent:undefined,
                progressStatus:undefined,

                fileList:[],
                downloadUrl:undefined,

                previewVisible: false,
                previewImage: '',
                show: true,
            }
        },
        mounted(){
            this.nk$editModeChanged(this.editMode);
        },
        methods:{
            nk$editModeChanged(){
                this.fileList = [];
                if(this.value && this.value.length){
                    this.value.forEach(async (valueData,index) =>{
                        let item = {
                            uid: valueData.uid||index,
                            name: valueData.name,
                            path: valueData.path,
                            url : undefined,
                        };
                        if(this.inputOptions.listType==='picture-card'){
                            const res = await this.$http.get("/api/fs/download?url="+valueData.path);
                            item.url = res.data;
                        }
                        this.fileList.push(item);
                        this.fileList = this.fileList.filter((item, index) => {
                            return this.fileList.findIndex((item1) => {
                                return item.uid == item1.uid;
                            }) == index;
                        });
                    })
                }
                this.progressPercent = undefined
            },
            beforeUpload(file){
                return new Promise((resolve,reject)=>{
                    const maxSize = (this.inputOptions.maxSize||(30*1024))*1024;//默认最大30M
                    if(file.size>maxSize){
                        this.$message.error(`文件 ${file.name} 大小超过限制`);
                        reject();
                        return;
                    }
                    this.$http.postJSON("/api/fs/init", {name:file.name,size:file.size,type:file.type})
                        .then(res=>{
                            this.config = res.data;
                            resolve(file);
                        }).catch(res=>{
                        this.$message.error(res);
                        reject();
                    });
                })
            },
            handleChange(info){
                this.fileList = info.fileList;
                switch (info.file.status){
                    case 'uploading':
                        this.progressPercent = Math.round(info.file.percent);
                        this.progressStatus  = 'active';
                        break;
                    case 'error':
                        this.progressStatus  = 'exception';
                        this.$message.error(`文件 ${info.file.name} 上传失败`);
                        break;
                    case 'down':
                    case 'done':
                        if(info.file.response&&info.file.response.status==='done'){
                            this.progressStatus  = 'success';
                            this.$message.success(`文件 ${info.file.name} 已上传`);
                            info.fileList.find(f=>f.uid===info.file.uid).path
                                = info.file.response.url||(this.config.path+(this.config.filename||info.file.name));

                            this.$emit('input',this.fileList);
                            this.change();
                        }else{
                            info.fileList.find(f=>f.uid===info.file.uid).status = 'error';
                            this.progressStatus  = 'exception';
                            this.$message.error(`文件 ${info.file.name} 上传失败`);
                        }

                        break;
                    case 'removed':
                        this.$emit('input',this.fileList);
                        break;
                }
            },
            async handlePreview(file) {

                let url = undefined;
                if(!file.path){
                    url = await getBase64(file.originFileObj);
                }else{
                    const res = await this.$http.get("/api/fs/download?url=" + file.path);
                    url = res.data;
                }

                if(url.length<1024*1024){
                    if (this.inputOptions.listType === 'picture-card') {
                        this.previewImage = url;
                        this.previewVisible = true;
                    } else {
                        this.$refs.link.href=url;
                        this.$refs.link.click();
                    }
                }else{
                    console.warn("文件URL过大，不能预览",url.length)
                    this.$message.warn("文件URL过大，不能预览");
                }
            },
            change(){
                this.$emit('change',[]);
            }
        }
    }
</script>
<style scoped>

</style>
<style scoped lang="less">
    .avatar-border{
        padding: 8px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        cursor: pointer;
        margin: 0 8px 8px 0;
    }
    .uploads{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .link + .link{
        margin-left: 8px;
    }
    ::v-deep {
        .ant-upload.ant-upload-select-picture-card,
        .ant-upload-list-picture-card-container,
        .ant-upload-list-picture-card .ant-upload-list-item{
            width:66px;
            height:66px;
        }
    }
</style>